<template>
  <div>
    <el-row>
      <el-col :span="12">
        <el-input
          style="width: 300px"
          size="small"
          placeholder="请输入电子卡号或车牌号"
          class="m-r-10"
          v-model="search.keyword"
          @change="query"
        />
      </el-col>
      <el-col :span="12">
        <div class="flex-end">
          <el-button
            v-if="!permission['filling-team:add-car']"
            style="margin-right: 10px"
            icon="el-icon-plus"
            class="m-r-10"
            size="small"
            type="primary"
            plain
            @click="addNew"
            >新增车辆</el-button
          >
          <el-upload
            v-if="!permission['filling-team:car-upload']"
            :action="'/api/uic-system/fillteamcar/import/' + id"
            :limit="1"
            :show-file-list="false"
            :on-success="handleSuccess"
            :headers="headerObj"
          >
            <el-button icon="el-icon-upload" size="small" type="primary" plain
              >批量导入</el-button
            >
          </el-upload>
          <el-button
            v-if="permission['filling-team:car-download']"
            style="margin-left: -5px; font-size: 12px !important"
            icon="el-icon-download"
            size="small"
            type="text"
            @click="download"
            >下载车辆信息模板
          </el-button>
        </div>
      </el-col>
    </el-row>
    <el-table
      class="my-table m-t-10"
      :data="data"
      v-loading="loading"
      style="width: 100%"
      border
      :header-cell-style="{ background: '#eee', color: '#000' }"
    >
      <el-table-column type="index" align="center" label="序号" width="60" />
      <el-table-column prop="carNo" label="车牌号" min-width="100" />
      <el-table-column fixed="right" label="操作" align="center" width="100">
        <template v-slot="scope">
          <el-button
            v-if="!permission['filling-team:car-delete']"
            @click.native.prevent="deleteRow(scope.$index, scope.row)"
            type="text"
            size="small"
            :loading="removeLoading"
            icon="el-icon-delete"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <app-pagination
      :total="total"
      :page-size="page.size"
      class="m-t-20"
      @change="pageChange"
    />
    <el-dialog
      title="新增车辆"
      append-to-body
      :visible.sync="showAddNewVehicleFlag"
      width="600px"
    >
      <div class="flex-start">
        <span style="width: 100px" class="m-r-15">车牌号</span>
        <el-input size="small" placeholder="输入车牌号" v-model="form.carNo" />
      </div>
      <!--      <div class="flex-start m-t-10 flex-align-items-unset">-->
      <!--        <span style="width: 100px;">驾驶证照片</span>-->
      <!--        <app-file-upload ref="appImgUploadRef" @change="imgChange"/>-->
      <!--      </div>-->
      <div class="dividing-line m-t-20 m-b-20"></div>
      <div class="flex-end">
        <el-button
          type="primary"
          plain
          size="small"
          @click="showAddNewVehicleFlag = false"
          >取消</el-button
        >
        <el-button type="primary" size="small" @click="confirmAdd"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import AppPagination from "@/components/business/app-pagination";
import {
  confirmWarning,
  downLoadFile,
  getRecords,
  getTotal,
  isStringEmpty,
  msgError,
  msgSuccess,
} from "@/util/common-util";
import AppFileUpload from "@/components/business/app-file-upload";
import {
  getPage,
  remove,
  save,
  unbindCard,
} from "@/api/business/filling-team-car";
import { getToken } from "@/util/auth";
import SelectFillingElectronicCardButton from "@/components/business/select-filling-electronic-card-button";
import {
  bindCar,
  bindCard2,
  unbindCar,
} from "@/api/business/filling-team-car-driver";
import SelectFillingCarButton from "@/components/business/select-filling-car-button";
import SelectFillingTeamUserButton from "@/components/business/select-filling-team-user-button";
import { mapGetters } from "vuex";

export default {
  name: "contract-customer-detail-vehicle-tab",
  computed: {
    ...mapGetters(["permission"]),
  },
  components: {
    SelectFillingTeamUserButton,
    SelectFillingCarButton,
    SelectFillingElectronicCardButton,
    AppFileUpload,
    AppPagination,
  },
  props: ["id"],
  data() {
    return {
      headerObj: { "Uic-Auth": "bearer " + getToken() },
      showAddNewVehicleFlag: false,
      showBindElectronicCardFlag: false,
      showBindTeamUserFlag: false,
      data: [],
      loading: false,
      removeLoading: false,
      unbindCardLoading: false,
      unbindCarLoading: false,
      bindCarLoading: false,
      cardLoading: false,
      carLoading: false,
      form: {
        teamId: "",
        carNo: "",
      },
      search: {
        teamId: "",
        keyword: "",
      },
      page: {
        size: 20,
        current: 1,
      },
      teamUserForm: {
        id: "",
        carId: "",
      },
      cardForm: {
        id: "",
        teamId: "",
        cardNo: "",
        cardId: "",
      },
      currRow: {},
      total: 0,
    };
  },
  created() {
    this.search.teamId = this.id;
    this.query();
  },
  methods: {
    handleSuccess() {
      msgSuccess("上传成功");
    },
    query() {
      this.loading = true;
      getPage(this.page, this.search)
        .then((res) => {
          this.data = getRecords(res);
          this.total = getTotal(res);
          this.loading = false;
        })
        .then(() => {
          this.loading = false;
        });
    },
    pageChange(_page) {
      this.page = _page;
      this.query();
    },
    deleteRow(index, row) {
      confirmWarning("删除车辆", `确定删除车辆 ${row.carNo} ？`, () => {
        this.removeLoading = true;
        remove(row.id)
          .then((res) => {
            this.removeLoading = false;
            msgSuccess();
            this.query();
          })
          .catch(() => {
            this.removeLoading = false;
          });
      });
    },
    addNew() {
      this.showAddNewVehicleFlag = true;
    },
    confirmAdd() {
      if (isStringEmpty(this.form.carNo)) return msgError("车牌号码不能为空");
      this.form.teamId = this.id;
      this.saveLoading = true;
      save(this.form)
        .then((res) => {
          msgSuccess();
          this.saveLoading = false;
          this.showAddNewVehicleFlag = false;
          this.query();
        })
        .catch(() => {
          this.saveLoading = false;
        });
    },
    async download() {
      await downLoadFile(
        "/api/uic-system/fillteamcar/export-template",
        "车辆信息模板.xls"
      );
    },

    unbindCar(row) {
      confirmWarning("解绑司机", "确定解绑司机？", () => {
        this.unbindCarLoading = true;
        unbindCar(row.id, row.userId)
          .then((res) => {
            this.unbindCarLoading = false;
            msgSuccess();
            this.query();
          })
          .catch(() => {
            this.unbindCarLoading = false;
          });
      });
    },
    bindCar(_row) {
      this.currRow = _row;
      this.showBindTeamUserFlag = true;
    },
    teamUserChange(v) {
      this.teamUserForm.id = v.id;
    },
    confirmCar() {
      this.bindCarLoading = true;
      this.teamUserForm.carId = this.currRow.id;
      bindCar(this.teamUserForm)
        .then((res) => {
          msgSuccess();
          this.showBindTeamUserFlag = false;
          this.query();
          this.bindCarLoading = false;
        })
        .catch(() => {
          this.bindCarLoading = false;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.my-table {
  ::v-deep .el-button--small {
    padding: 0 5px !important;
    font-size: 14px !important;
  }

  ::v-deep td {
    padding: 8px 0 !important;
  }
}
</style>
